<template>
  <div class="homeHeader">
    <div class="homeHeader_tool">
      <el-popover
          placement="bottom"
          title="换肤"
          :width="400"
          trigger="hover"
      >
        <template #reference>
          <el-button :color="skinMode.buttonColor">换肤</el-button>
        </template>
        <div>
          <el-radio-group v-model="skinModeValue" @change="changeSkinMode">
            <el-radio label="original">初始</el-radio>
            <el-radio label="light">明亮</el-radio>
          </el-radio-group>
        </div>
      </el-popover>
    </div>
    <dv-decoration-8
        class="homeHeader_icon"
        :color="skinMode.topBorderColor"
    />
    <div
        class="homeHeader_title"
    >
      XXX数据流量可视化平台
      <dv-decoration-5 style="width:800px;height:40px;" :color="skinMode.topBorderColor" :dur="8"/>
    </div>
    <dv-decoration-8 :reverse="true" class="homeHeader_icon" :color="skinMode.topBorderColor"/>
  </div>
</template>

<script setup lang="ts">
import {computed, ref} from "vue";
import { useStore } from "vuex";
import {skin} from "@/utils/interface";
import { ElLoading } from 'element-plus'
import $bus from '@/utils/bus/index'
import original from "@/views/homeView/skin/original";

const store = useStore()
const skinMode = computed(():skin => {
  return store.state.home.skinMode?store.state.home.skinMode:original
})
let skinModeValue = ref('original')

const changeSkinMode = (value:string) => {
  $bus.homeBus.emit('clearInterval')
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.9)',
  })
  setTimeout(() => {
    store.commit('home/set_skinMod',value)
  }, 500)
  setTimeout(() => {
    loading.close()
    $bus.homeBus.emit('createInterval')
  }, 3000)
}
</script>

<style scoped lang="scss">
.homeHeader{
  display: flex;
  height: 100px;
  flex-wrap: wrap;
  justify-content: space-between;
  .homeHeader_tool{
    position: absolute;
    right: 50px;
    top: 10px;
  }
  .homeHeader_title{
    padding-top: 20px;
    text-align: center;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 8px;
  }
  .homeHeader_icon{
    width: 400px;
    height: 50px;
    margin-top: 25px;
  }
}
</style>